<template>
	<view class="pushEvaluate">
		<tui-navigation-bar :titleSize="18" :titleLineHeight="18" :titlefontWeight="800" :isOpacity="false"
			:splitLine="true" @init="initNavigation" title="发表评价" backgroundColor="#fff" color="#000">
			<view class="tui-header-icon" :style="{ marginTop: top + 'px' }">
				<tui-icon name="arrowleft" color="#333" @click="back"></tui-icon>
			</view>
		</tui-navigation-bar>
		<view class="pushEvaluate_content" :style="{ paddingTop: marginTop + 20 + 'px' }">
			<tui-textarea isCounter :borderBottom="false" :borderTop="false" minHeight="100rpx" autoHeight
				maxlength="200" placeholder="请输入评价~" v-model="intro">
				<!-- <template v-slot:inner>
					<view class="tui-box-upload">
						<tui-upload width="180" height="180" radius="30" :value="value" :serverUrl="serverUrl"
							@complete="result" @remove="remove"></tui-upload>
					</view>
				</template> -->
			</tui-textarea>
		</view>
		<view class="footer">
			<tui-form-button @click="publishComment" radius="70rpx" size="34" color="#fff" width="690rpx" height="84rpx"
				background="#2FD7D3">
				立即评价
			</tui-form-button>
		</view>
	</view>
</template>

<script>
	import {comment} from "@/http/api/index/index.js"
	import Cache from '@/utils/cache'
	export default {
		data() {
			return {
				// 导航栏
				top: 0, //标题图标距离顶部距离
				marginTop: 0, // 页面内容距离顶部的距离

				intro: '',// 评价内容
				orderId: ''// 订单id
			}
		},
		onLoad(options) {
			this.orderId = options.orderId;
		},
		methods: {
			// 导航栏
			initNavigation(e) {
				this.top = e.top;
				this.marginTop = e.height;
			},
			back() {
				uni.navigateBack({
							        delta: 1
							    });;
			},
			// 发布评论
			publishComment(){
				if(!this.intro){
					 this.$utils.toast('请输入评论内容！')
					return;
				}
				comment({
					commentType: '2',
					orderId: this.orderId,
					content: this.intro,
					userId: Cache.get("userId")
				}).then(res => {
					if (res.code == 200) {
						 this.$utils.toast("评论已发布");
					     uni.navigateBack({
							        delta: 1
							    });;
					}
				}).catch(res => {
					this.$utils.toast(res);
				})
			}
		}
	}
</script>

<style lang="scss" scoped> 
	@import "./pushEvaluate.scss";
	.pushEvaluate {
		background-color: #fff;
		height: 100vh;
		width: 100vw;

		.tui-header-icon {
			width: 100%;
			position: fixed;
			top: 0;
			padding: 0 0 0 38rpx;
			display: flex;
			align-items: center;
			height: 32px;
			transform: translateZ(0);
			box-sizing: border-box;
		}

		.pushEvaluate_content {
			margin-left: 20rpx;

			.tui-box-upload {
				margin-bottom: 100rpx;
			}
		}
	}
</style>